<template>
  <view class="index-page">
    <u-navbar
      title="提现"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <view>
      <view class="yh-0">
        <view class="yh-1">
          <view class="yh-2">提现银行卡</view>
          <view class="yh-3" @click="state.show = true">
            <view class="yh-4">
              {{ state.isDefault.bank_name }}
              <image src="@/static/images/zhankai.png"></image>
            </view>

            <view class="yh-5">24小时内到账</view>
          </view>
          <view class="w-clear"></view>
        </view>
      </view>
      <view class="tx-1">
        <view class="tx-2">提现金额</view>
        <view class="tx-3">
          <view class="tx-4">￥</view>
          <input type="digit" v-model="state.number" @blur="numberSet" />
        </view>
        <view class="tx-5">
          可提现余额：¥ {{ state.balance ? state.balance : 0 }}，
          <view class="tx-6" @click="state.number = state.balance"
            >全部提现</view
          >
        </view>
        <u-button
          :throttleTime="300"
          class="tx-7"
          shape="circle"
          :custom-style="state.customStyle"
          @click="submit"
        >
          确认提现
        </u-button>
        <view class="tx-8"> * 第三方转账手续费5% </view>
        <view class="tx-9">* 提现功能一天只能发起一次</view>
      </view>
      <u-popup mode="bottom" v-model="state.show">
        <view class="xuz-1">
          <view class="xuz-2">选择银行卡</view>
          <view
            class="xuz-3"
            v-for="item in state.list"
            @click=";(state.isDefault = item), (state.show = false)"
          >
            <view class="xuz-9">
              <view class="xuz-4"><image :src="item.logo"></image></view>
              <view class="xuz-5">
                <view class="xuz-6">{{ item.bank_name }}</view>
                <view class="xuz-7">24小时内到账</view>
              </view>
            </view>
            <view class="xuz-8" v-if="state.isDefault.account === item.account"
              ><image src="@/static/images/dui.png"></image
            ></view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getWalletList, getBankCardList, apply } from '@/api/modules/user'

import { reactive, onMounted } from 'vue'
const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  list: [] as any,
  show: false,
  isDefault: { account: '', bank_name: '', id: '' }, //默认银行卡
  balance: '', //余额
  number: '' //提现金额
})
onMounted(() => {
  getBankCardList().then((result) => {
    getWalletList().then((res) => {
      state.balance = res.data[0].balance
      state.list = result.data
      if (state.list.length > 0)
        state.isDefault = state.list.filter((v: any) => v.is_default === 1)[0]
    })
  })
})
//提现
const submit = () => {
  apply({
    pay_way: 3,
    money: state.number,
    bank_card_id: state.isDefault.id
  }).then((result) => {
    uni.showToast({
      title: '申请成功',
      icon: 'success'
    })
    uni.navigateBack({
      delta: 1 //返回层数，2则上上页
    })
  })
}
//金额输入检测
const numberSet = () => {
  if (+state.number > +state.balance) {
    state.number = state.balance
    uni.showToast({
      title: '超过本次可提现余额',
      icon: 'error'
    })
  }
}
</script>
<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.tx-1 {
  width: 646upx;
  margin: 0 auto;
  margin-top: 20upx;

  .tx-2 {
    font-size: 38upx;
    color: #fff;
  }

  .tx-3 {
    width: 100%;
    border-bottom: 1upx solid #555;
    height: 110upx;

    .tx-4 {
      float: left;
      line-height: 118upx;
      font-size: 30upx;
      color: #ccc;
    }
  }

  .tx-5 {
    font-size: 24upx;
    color: #f6bf50;
    margin-top: 25upx;

    .tx-6 {
      color: #ccc;
      display: inline-block;
    }
  }

  .tx-7 {
    width: 646upx;
    height: 94upx;
    background: #444;
    border-radius: 47upx;
    text-align: center;
    color: #fcfcfc;
    font-size: 30upx;
    line-height: 94upx;
    margin-top: 50upx;
  }

  .tx-8 {
    font-size: 24upx;
    color: #aaaaaa;
    margin-top: 25upx;
    view {
      display: inline-block;
    }
  }
  .tx-9 {
    font-size: 24upx;
    color: #aaaaaa;
    margin-top: 12upx;
  }
}
.tx-3 input {
  height: 110upx;
  line-height: 110upx;
  font-size: 38upx;
  color: #fff;
  padding-left: 25upx;
  box-sizing: border-box;
}
/deep/.u-button--info {
  border-width: 0;
}

/deep/.u-button {
  height: auto;
  width: 100%;
  display: block;
}
.yh-0 {
  width: 100%;
  padding: 60rpx 0 80rpx 0;
}
.yh-1 {
  width: 646rpx;
  background: #1b1b1b;
  margin: 0 auto;
  .yh-2 {
    float: left;
    width: 30%;
    color: #fcfcfc;
    font-size: 26rpx;
  }
  .yh-3 {
    float: left;
    width: 70%;
    .yh-4 {
      font-size: 26rpx;
      color: #fcfcfc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      image {
        user-select: none;
        pointer-events: none;
        width: 10rpx;
        height: 17rpx;
      }
    }
    .yh-5 {
      font-size: 22rpx;
      color: #aaa;
      margin-top: 25rpx;
    }
  }
}
.xuz-10 {
  padding: 30rpx 0;
  border-bottom: 1px solid #444;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 28rpx;
  color: #fcfcfc;
  image {
    user-select: none;
    pointer-events: none;
    width: 36rpx;
    height: 33rpx;
    margin-right: 25rpx;
  }
}
.xuz-1 {
  background-color: #231f30;
  width: 100%;
  margin: 0 auto;
  padding: 0 50rpx 50rpx;

  .xuz-2 {
    text-align: center;
    font-size: 28rpx;
    color: #fcfcfc;
    line-height: 120rpx;
    border-bottom: 1px solid #444;
  }
  .xuz-3 {
    padding: 30rpx 0;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .xuz-9 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .xuz-4 {
        image {
          user-select: none;
          pointer-events: none;
          width: 46rpx;
          height: 46rpx;
          display: block;
          border-radius: 50%;
        }
      }
      .xuz-5 {
        margin-left: 25rpx;
        .xuz-6 {
          font-size: 28rpx;
          color: #fcfcfc;
        }
        .xuz-7 {
          font-size: 20rpx;
          color: #aaa;
          margin-top: 15rpx;
        }
      }
    }
    .xuz-8 {
      image {
        user-select: none;
        pointer-events: none;
        width: 38rpx;
        height: 38rpx;
      }
    }
  }
}
.tixian {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  > view {
    width: 646rpx;
    height: 230rpx;
    background: #242625;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    border-radius: 20rpx;
    .title {
      color: #fcfcfc;
      font-size: 38rpx;
      text-align: center;
      line-height: 100rpx;
      margin-top: 0;
    }
    > view {
      overflow: hidden;
      margin-top: 30rpx;
      view {
        width: 196rpx;
        height: 64rpx;
        background: #666;
        border-radius: 30rpx;
        text-align: center;
        float: left;
        margin-left: 40rpx;
        line-height: 64rpx;
        color: #fcfcfc;
        font-size: 26rpx;
      }
      view:last-child {
        background: linear-gradient(#f6bf50, #f6d05e);
        margin-left: 150rpx;
      }
    }
  }
}
</style>
